<script setup>
import { ref } from 'vue';
import { useBoolean } from '@sa/hooks';
import { $t } from '@/locales';
import { useTable } from '@/hooks/common/table';
import { fetchShopSeach } from '@/service/api';
import ActivitySearch from './modules/activity-search.vue';
import ListOperateDrawer from './modules/list-operate-drawer.vue';
import ConfirmModal from './modules/confirm-modal.vue';

const { bool: confirmVisible, setTrue: openConfirmModal } = useBoolean();
const { bool: listVisible, setTrue: openDrawer } = useBoolean();

const { columns, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchShopSeach,
  apiParams: {
    PageIndex: 1,
    PageSize: 5,
    taskNumber: undefined,
    participatingStores: []
  },
  columns: () => [
    { type: 'selection', width: 48 },
    { prop: 'ShopId', label: $t('page.operations.promotionNumber') },
    { prop: 'Name', label: $t('page.operations.promotionName') },
    { prop: 'promotionTime', label: $t('page.operations.promotionTime') },
    { prop: 'promotionDetail', label: $t('page.operations.promotionDetail') }
  ]
});

const model = ref(createDefaultModel());
function createDefaultModel() {
  return {
    isAll: false,
    isEcpc: false,
    isDaily: false,
    dailyPrice: '',
    isRecommend: false,
    recommendPrice: '',
    uniformPrice: ''
  };
}

const fileList = ref([]);
function handleEffectFeedback() {
  openDrawer();
}
function handleBatchImport() {}
function handleConfirm() {
  openConfirmModal();
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ActivitySearch v-model:model="searchParams" @effect-feedback="handleEffectFeedback" />
    <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
      <template #header>
        <TableHeaderOperation :loading="loading">
          <ElButton type="primary" @click="handleBatchImport">{{ $t('common.batchImport') }}</ElButton>
          <template #suffix>
            <div class="flex">
              <ElInput v-model="model.uniformPrice" placeholder="输入统一出价" />
              <ElButton type="primary">应用</ElButton>
            </div>
          </template>
        </TableHeaderOperation>
      </template>
      <div class="h-[calc(100%-50px)]">
        <ElTable v-loading="loading" height="100%" border class="sm:h-full" :data="data" row-key="ShopId">
          <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
        </ElTable>
      </div>
    </ElCard>
    <ElCard class="card-wrapper">
      <ElForm :model="model" label-placement="left" label-width="145px" class="w-600px">
        <ElFormItem :label="$t('page.operations.promotionProducts')">
          <div class="flex-col flex-1">
            <div class="flex">
              <span class="mr-16px">全店商品</span>
              <ElSwitch v-model="model.isAll" />
            </div>
            <ElUpload
              v-model:file-list="fileList"
              class="uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
            >
              <ElIcon :size="40">
                <SvgIcon icon="material-symbols:add" />
              </ElIcon>
            </ElUpload>
            <div class="flex">
              <span class="mr-16px">{{ $t('page.operations.ecpc') }}</span>
              <ElSwitch v-model="model.isEcpc" />
            </div>
            <div class="flex">
              <span class="mr-16px flex-none">{{ $t('page.operations.dailyDiscoveries') }}</span>
              <ElSpace :size="18">
                <ElSwitch v-model="model.isDaily" />
                <ElInput v-model="model.dailyPrice" placeholder="输入出价" />
              </ElSpace>
            </div>
            <div class="flex">
              <span class="mr-16px flex-none">{{ $t('page.operations.recommend') }}</span>
              <ElSpace :size="18">
                <ElSwitch v-model="model.isRecommend" />
                <ElInput v-model="model.recommendPrice" placeholder="输入出价" />
              </ElSpace>
            </div>
          </div>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" @click="handleConfirm">{{ $t('page.operations.startServing') }}</ElButton>
        </ElFormItem>
      </ElForm>
    </ElCard>

    <ConfirmModal
      v-model:visible="confirmVisible"
      title="创建成功"
      message="广告任务创建成功"
      left-text="查看任务"
      right-text="再次创建"
    />

    <ListOperateDrawer v-model:visible="listVisible" />
  </div>
</template>

<style lang="scss" scoped>
.uploader {
  :deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 80px;
  }
}
</style>
